import { PartFigure } from './PartFigure';
import { PPM } from './Canvas';
import { BeMotor } from '../model/parts/Servo';


export default class ServoFigure extends PartFigure {

    private body: raphaeljs.Element
    private neck: raphaeljs.Element
    private axle: raphaeljs.Element

    protected createChild() {

        const H = 35.20 * PPM
        
        this.axle = this.canvas.paper.path([
            ["M", 21.6*PPM, H-28.8*PPM] ,
            ["L", 21.6*PPM, H-35.2*PPM] ,
            ["L", 26.4*PPM, H-35.2*PPM] ,
            ["L", 26.4*PPM, H-28.8*PPM] ,
            ["z"]
        ]).attr({
            fill: "#fff"
        })

        this.selector.setup(this.axle)

        this.body = this.canvas.paper.path([
            ["M", 8*PPM, H] ,
            ["L", 32*PPM, H] ,
            ["L", 32*PPM, H-9.6*PPM] ,
            ["L", 40*PPM, H-9.6*PPM] ,
            ["L", 40*PPM, H-19.2*PPM] ,
            ["L", 32*PPM, H-19.2*PPM] ,
            ["L", 32*PPM, H-25.6*PPM] ,
            ["L", 30*PPM, H-25.6*PPM] ,
            ["L", 30*PPM, H-28.8*PPM] ,
            ["L", 15*PPM, H-28.8*PPM] ,
            ["L", 15*PPM, H-25.6*PPM] ,
            ["L", 8*PPM, H-25.6*PPM] ,
            ["L", 8*PPM, H-19.2*PPM] ,
            ["L", 0*PPM, H-19.2*PPM] ,
            ["L", 0*PPM, H-9.6*PPM] ,
            ["L", 8*PPM, H-9.6*PPM] ,
            ["z"]
        ]).attr({
            fill: (this.part instanceof BeMotor)? "#E67E22": "#999"
        })

        this.selector.setup(this.body)

        this.neck = this.canvas.paper.path([
            ["M", 15*PPM, H-25.6*PPM] ,
            ["L", 30*PPM, H-25.6*PPM] ,
        ]).attr({
            "stroke-width": 0.5
        })

        // 名称
        this.name = this.canvas.paper.text(0.5*PPM, H-(25.6+1.8)*PPM, this.part.instanceName)
                            .attr({
                                'font-size': 2*PPM ,
                                'text-anchor': "start"
                            })
        this.allElements.push(this.name)

        // port
        this.createPort(this.part.studs[0][0], 8*PPM, H-8*PPM)
        this.createPort(this.part.studs[0][1], 16*PPM, H-8*PPM)
        this.createPort(this.part.studs[0][2], 24*PPM, H-8*PPM)

        // 线色提示文本
        let detailTxt = (text: string, x:number, y:number, color:string) => {
            let txt = this.name = this.canvas.paper.text(x, y, text).attr({'font-size': 1.5*PPM, 'fill': color})
            this.detailTextSet.push(txt)
            this.setDetailVisibale(txt)
            this.allElements.push(txt)
        }
        detailTxt('橙线', 12*PPM, H-8*PPM, '#F1C40F')
        detailTxt('红线', 20*PPM, H-8*PPM, '#FF0000')
        detailTxt('褐线', 28*PPM, H-8*PPM, '#641E16')
        

        this.allElements.push(this.body)
        this.allElements.push(this.neck)
        this.allElements.push(this.axle)
        this.draggableElements.push(this.body)
        this.draggableElements.push(this.neck)
        this.draggableElements.push(this.axle)
        this.growSet.push(this.body)
        this.growSet.push(this.neck)
        this.growSet.push(this.axle)
    }
}